<template>
  <div style="background: #ffff">
    <div :class="className" v-if="!split">
      <el-carousel :direction="direction" :interval="4000" arrow="never">
        <el-carousel-item
          :autoplay="true"
          v-for="(item, index) in carouselImg"
          :key="index"
        >
          <img :src="item.img" />
          <div class="carouseText">
            <h2 class="itemH2">{{ item.titte }}</h2>
            <p class="itemP" v-html="item.content">{{ item.content }}</p>
            <!--
            <el-button
              :style="'background:' + item.buttonColour"
              class="btnStyle"
              >了解更多
              <i class="el-icon-caret-right"></i>
            </el-button>
           -->
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div :class="className" v-else>
      <el-carousel
        ref="cardShow"
        :autoplay="false"
        :direction="direction"
        :interval="4000"
        arrow="never"
        indicator-position="none"
      >
        <el-carousel-item
          :autoplay="false"
          v-for="(item, index) in advantageList"
          :key="index"
        >
          <ul>
            <li
              v-for="(child, index) in item.children"
              :key="index"
              @mouseenter="child.hoverValue = true"
              @mouseleave="child.hoverValue = false"
            >
              <div v-if="icon" class="icon">
                <img
                  :src="child.hoverValue == true ? child.iconOn : child.iconOff"
                />
              </div>
              <h3 class="itemH3" v-if="icon || subtit">{{ child.title }}</h3>
              <p class="itemP" v-html="child.content">{{ child.content }}</p>
              <img :src="child.img" />

              <div v-if="icon" class="iconRight">
                <img
                  :src="child.hoverValue == true ? child.ArrowR : child.arrowR"
                />
              </div>
              <span v-if="icon" class="iconStyle">服务项目</span>
            </li>
          </ul>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>
<script>
export default {
  name: 'carousel',
  props: {
    direction: {
      type: String,
      default: 'horizontal'
    },
    icon: {
      type: Boolean,
      default: false
    },
    subtit: {
      type: Boolean,
      default: false
    },
    split: {
      type: Boolean,
      default: false
    },
    className: {
      type: String,
      default: ''
    },
    carouselImg: {
      type: Array,
      default: () => {
        return []
      }
    },
    advantageList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {}
  },
  methods: {
    enter () {
      this.$emit('enter')
    },
    leave () {
      this.$emit('leave')
    },
    change (pre) {
      this.$emit('change', pre + 1)
    }
  }
}
</script>
<style lang="scss" scoped>
.iconStyle {
  font-size: 14px;
  font-weight: 400;
  color: #ffffff;
  position: absolute;
  bottom: 46px;
  right: 51px;
}
.btnStyle {
  width: 138px;
  height: 42px;
  margin-top: 42px;
  font-size: 16px;
  border-color: transparent;
}
</style>
